import ApiBudget from "@/api/budget";
import Money from "@/components/app/Money";
import PopupContainer from "@/components/app/PopupContainer";
import ByCell from "@/components/ui/ByCell";
import ByCol from "@/components/ui/ByCol";
import ByIcon from "@/components/ui/ByIcon";
import ByRow from "@/components/ui/ByRow";
import useFetch from "@/hooks/useFetch";
import { View } from "@tarojs/components";
import { isArray } from "@tarojs/shared";
import { useRouter } from "@tarojs/taro";

const renderList = [
  { text: "区域", key: "area" },
  { text: "名称", key: "sourceName" },
  { text: "规格", key: "sourceSpec" },
  { text: "单位", key: "sourceUnit" },
  { text: "预算单价", key: "" },
  { text: "结算单价", key: "" },
  { text: "预算数量", key: ["ysBudNum", "originalYSBudNum"] },
  { text: "结算数量", key: ["jsBudNum", "originalJSBudNum"] },
  { text: "预算标配量", key: "standardNum" },
  { text: "结算标配量", key: "jsStandardNum" },
  { text: "预算金额", key: ["ysCompreMoney", "originalYSCompreMoney"] },
  { text: "结算金额", key: ["jsCompreMoney", "originalJSCompreMoney"] },
];

interface ApifoxModel {
  /**
   * 区域
   */
  area: string;
  /**
   * 注意事项
   */
  attentionMatter?: string;
  /**
   * 预算详情ID
   */
  budgetDetailId: number;
  /**
   * 综合价格
   */
  comprePrice: number;
  /**
   * 详情类型
   */
  detailType: number;
  /**
   * 是否升级
   */
  isUpgraded: boolean;
  /**
   * 结算数量
   */
  jsBudNum: number;
  /**
   * 结算综合金额
   */
  jsCompreMoney: number;
  /**
   * 结算综合价格
   */
  jsComprePrice: number;
  /**
   * 结算标准数量
   */
  jsStandardNum: number;
  /**
   * 结算升级价格
   */
  jsUpgradePrice: number;
  /**
   * 预算数量
   */
  originalJSBudNum: number;
  /**
   * 结算综合金额
   */
  originalJSCompreMoney: number;
  /**
   * 预算数量
   */
  originalYSBudNum: number;
  /**
   * 预算综合金额
   */
  originalYSCompreMoney: number;
  /**
   * 套餐编码
   */
  packageCode: string;
  /**
   * 套餐名称
   */
  packageName: string;
  /**
   * 备注
   */
  remark?: string;
  /**
   * 来源品牌类别
   */
  sourceBrandCategory?: string;
  /**
   * 来源编码
   */
  sourceCode: string;
  /**
   * 来源ID
   */
  sourceId: number;
  /**
   * 来源名称
   */
  sourceName: string;
  /**
   * 来源规格
   */
  sourceSpec?: string;
  /**
   * 来源单位
   */
  sourceUnit: string;
  /**
   * 标准数量
   */
  standardNum: number;
  /**
   * 技术要求
   */
  technical?: string;
  /**
   * 升级价格
   */
  upgradePrice: number;
  /**
   * 预算数量
   */
  ysBudNum: number;
  /**
   * 预算综合金额
   */
  ysCompreMoney: number;
  [property: string]: any;
}


export default () => {

  const { params } = useRouter()

  const { data } = useFetch<ApifoxModel>(ApiBudget.getChangeDetail, { showLoading: true, defaultParams: [{ budgetDetailId: Number(params.budgetDetailId) }] })

  return (

    <View className="p-3">
      <ByRow wrap>
        {renderList.map((item) => (
          <ByCol span={6}>
            <ByCell vertical label={item.text}>
              {
                isArray(item.key) ?
                  <View className="flex items-center mt-3">
                    <Money value={data?.[item.key[0]]} type="primary" />
                    <ByIcon name="ToRight" className="rotate-180 mx-2" />
                    <Money value={data?.[item.key[1]]} type="third" />
                  </View> :
                  data?.[item.key]
              }
            </ByCell>
          </ByCol>
        ))}
      </ByRow>
    </View>

  );
};
